<template>
  <scroll-view
    :refresher-enabled="true"
    @refresherrefresh="onRefresh"
    :refresher-triggered="isRefreshing"
    style="min-height: 600rpx; overflow-y: auto"
  >
    <view class="detail-container">
      <!-- 单号信息 -->
      <view class="order-info">
        <view class="order-number">
          <text class="label">单号：</text>
          <text class="value">{{ inStockCode }}</text>
        </view>
        <text class="scan-tip">请扫描商品或标签码</text>
      </view>
      <!-- Tab内容区域 -->
      <wd-tabs v-model="tab" @tap="changeTabs" sticky>
        <wd-tab title="产品信息">
          <!-- 商品信息卡片 -->

          <view class="list-card" v-for="ele in stockTranDetailList" :key="ele.id">
            <!-- 数据表格 -->
            <view class="table">
              <!-- 表头 -->
              <view class="table-header">
                <!-- <view class="th">产品编号</view> -->
                <view class="th">产品名称</view>
                <view class="th">已入</view>
                <view class="th">待入</view>
              </view>

              <!-- 表格内容 -->
              <view class="table-row">
                <!-- <view class="td">{{ ele.productCode }}</view> -->
                <view class="td">{{ ele.productName }}</view>
                <view class="td">
                  <wd-text
                    :text="`${ele.locationQty.reduce((total, qty) => total + qty.qty, 0).toFixed(2)}${formatUnit(ele.unit)}`"
                    bold
                  ></wd-text>
                </view>
                <view class="td">
                  <wd-text
                    :text="`${ele.qty - ele.locationQty.reduce((total, qty) => total + qty.qty, 0) < 0 ? 0 : (ele.qty - ele.locationQty.reduce((total, qty) => total + qty.qty, 0)).toFixed(2)}${formatUnit(ele.unit)}`"
                    bold
                    class="qty-text"
                  ></wd-text>
                </view>
              </view>

              <!-- 建议信息 -->
              <!-- <view class="suggestion-header">
              <view class="th">建议仓库</view>
              <view class="th">建议行</view>
              <view class="th">建议列</view>
              <view class="th">建议层</view>
            </view>
            <view class="suggestion-row">
              <view class="td">
                <wd-text :text="ele.location.split('-')[0] || '无'" bold></wd-text>
              </view>
              <view class="td">
                <wd-text :text="ele.location.split('-')[1] || '无'" bold></wd-text>
              </view>
              <view class="td">
                <wd-text :text="ele.location.split('-')[2] || '无'" bold></wd-text>
              </view>
              <view class="td">
                <wd-text :text="ele.location.split('-')[3] || '无'" bold></wd-text>
              </view>
            </view> -->
            </view>
          </view>
        </wd-tab>

        <wd-tab title="已绑库">
          <view style="display: flex; flex-direction: column">
            <view class="stock-list">
              <view v-if="scanDataList.length" class="list">
                <wd-swipe-action
                  v-for="(item, index) in scanDataList"
                  @tap="handleDelScan($event, item.id, 'id')"
                  :key="index"
                  class="mt-2"
                >
                  <view class="basket-card">
                    <view class="basket-header">
                      <view class="basket-title">
                        <view class="basket-code">
                          <wd-icon name="goods" size="36rpx" color="#4080ff"></wd-icon>
                          {{ item.basket }}
                        </view>
                        <view class="storage-status">
                          <text :class="['location-text']">
                            {{ item.location || '无' }}
                          </text>
                        </view>
                      </view>
                    </view>

                    <view class="basket-content">
                      <view class="info-grid">
                        <view class="info-cell">
                          <view>
                            <wd-icon name="code" size="28rpx" color="#909399"></wd-icon>
                            <text class="info-label">产品编码：</text>
                          </view>
                          <view>
                            <text class="info-value">{{ item.productCode }}</text>
                          </view>
                        </view>
                        <view class="info-cell">
                          <view>
                            <wd-icon name="bags" size="28rpx" color="#909399"></wd-icon>
                            <text class="info-label">产品名称：</text>
                          </view>
                          <view>
                            <text class="info-value">{{ item.productName }}</text>
                          </view>
                        </view>
                        <view class="info-cell">
                          <view>
                            <wd-icon name="discount" size="28rpx" color="#909399"></wd-icon>
                            <text class="info-label">数量：</text>
                          </view>
                          <view>
                            <text class="info-value">
                              {{ item.qty || 0 }}
                            </text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                  <template #right v-if="inStockStatus != 5">
                    <view class="swipe-delete">
                      <wd-icon name="delete" color="#f56c6c" size="22px"></wd-icon>
                    </view>
                  </template>
                </wd-swipe-action>
              </view>
              <view v-else class="empty">
                <view class="empty-text">暂无扫描数据</view>
              </view>
            </view>

            <view class="bottom-button" v-if="inStockStatus != 5">
              <!-- <scan-code @tap="handleBindLocation" :showButton="true" buttonText="绑定库位" /> -->
              <wd-button type="primary" block :round="false" @tap="handleSubmit">
                提交入库
              </wd-button>
            </view>
          </view>
        </wd-tab>
        <wd-tab title="待绑库" v-if="inStockStatus != 5">
          <view style="display: flex" class="!w-full"></view>
          <!-- <wd-button @tap="getScanData('w1722')">扫筐码</wd-button>
          <wd-button @tap="getScanData('s2010120112016;PRO0000046;土豆;20.5;吨;pur1213131;美团')">
          </wd-button> -->
          <view class="stock-list" v-if="!showGroupBtn">
            <scroll-view scroll-y style="height: 100%">
              <view class="list" style="max-height: 100%">
                <view v-if="tempScanDataList.length">
                  <wd-swipe-action
                    v-for="(item, index) in tempScanDataList"
                    :key="index"
                    class="mt-2"
                  >
                    <view
                      class="basket-card"
                      :class="item.location !== tempScanDataList[0].location ? 'error-border' : ''"
                    >
                      <view class="basket-header">
                        <view class="basket-title">
                          <view class="basket-code">
                            <wd-icon name="goods" size="36rpx" color="#4080ff"></wd-icon>

                            {{ item.basket }}
                          </view>
                          <view class="storage-status">
                            <wd-icon
                              v-if="item.location !== tempScanDataList[0].location"
                              name="warning"
                              color="#f56c6c"
                            ></wd-icon>
                            <text
                              :class="[
                                'location-text',
                                { 'error-text': item.location !== tempScanDataList[0].location },
                              ]"
                            >
                              {{ item.location || '无' }}
                            </text>
                          </view>
                        </view>
                      </view>

                      <view class="basket-content">
                        <view class="info-grid">
                          <view class="info-cell">
                            <view>
                              <wd-icon name="code" size="28rpx" color="#909399"></wd-icon>
                              <text class="info-label">产品编码：</text>
                            </view>
                            <view>
                              <text class="info-value">{{ item.productCode }}</text>
                            </view>
                          </view>
                          <view class="info-cell">
                            <view>
                              <wd-icon name="bags" size="28rpx" color="#909399"></wd-icon>
                              <text class="info-label">产品名称：</text>
                            </view>
                            <view>
                              <text class="info-value">{{ item.productName }}</text>
                            </view>
                          </view>
                          <view class="info-cell">
                            <view>
                              <wd-icon name="discount" size="28rpx" color="#909399"></wd-icon>
                              <text class="info-label">数量：</text>
                            </view>
                            <view>
                              <text class="info-value">{{ item.qty || 0 }}</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <!-- <template #right>
                      <view class="swipe-delete">
                        <wd-icon name="delete" color="#f56c6c" size="22px"></wd-icon>
                      </view>
                    </template> -->
                  </wd-swipe-action>
                </view>
                <view v-else class="empty">
                  <view class="empty-text">暂无扫描数据</view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="stock-list" v-else>
            <scroll-view scroll-y style="height: 100%">
              <view class="list" style="max-height: 100%">
                <view>
                  <wd-swipe-action
                    v-for="(item, index) in groupScanList"
                    @tap="handleDelGroupScan($event, index, 'index')"
                    :key="index"
                    class="mt-2"
                  >
                    <view class="basket-card">
                      <view class="basket-header">
                        <view class="basket-title">
                          <view class="basket-code">
                            <wd-icon name="goods" size="36rpx" color="#4080ff"></wd-icon>
                            {{ item.basket }}
                          </view>
                          <view class="storage-status">
                            <text :class="['location-text']">
                              {{ item.location || '无' }}
                            </text>
                          </view>
                        </view>
                      </view>

                      <view class="basket-content">
                        <view class="info-grid">
                          <view class="info-cell">
                            <view>
                              <wd-icon name="code" size="28rpx" color="#909399"></wd-icon>
                              <text class="info-label">产品编码：</text>
                            </view>
                            <view>
                              <text class="info-value">{{ item.productCode }}</text>
                            </view>
                          </view>
                          <view class="info-cell">
                            <view>
                              <wd-icon name="bags" size="28rpx" color="#909399"></wd-icon>
                              <text class="info-label">产品名称：</text>
                            </view>
                            <view>
                              <text class="info-value">{{ item.productName }}</text>
                            </view>
                          </view>
                          <view class="info-cell">
                            <view>
                              <wd-icon name="discount" size="28rpx" color="#909399"></wd-icon>
                              <text class="info-label">数量：</text>
                            </view>
                            <view>
                              <text class="info-value">{{ item.qty || 0 }}</text>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                    <template #right>
                      <view class="swipe-delete">
                        <wd-icon name="delete" color="#f56c6c" size="22px"></wd-icon>
                      </view>
                    </template>
                  </wd-swipe-action>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="bottom-button">
            <wd-button
              type="primary"
              class="!w-88"
              :round="false"
              v-if="!showGroupBtn"
              @tap="() => ((showGroupBtn = true), (showGroupLocation = true))"
            >
              分组绑定
            </wd-button>
            <!-- <wd-button
              @tap="
                getScanData('S2503210000017;PRO0000078;土豆;15;kg;PUR20250321000000005;深圳海吉星')
              "
            >
              ces
            </wd-button> -->
            <wd-button type="primary" v-if="showGroupBtn" :round="false" @tap="finishGroup">
              完成分组
            </wd-button>
            <wd-button
              type="primary"
              :round="false"
              :disabled="showGroupBtn"
              @tap="handleBindLocation"
            >
              绑定库位
            </wd-button>
          </view>
        </wd-tab>
      </wd-tabs>
    </view>
  </scroll-view>

  <scan-code @scanSuccess="getScanData" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import scanCode from '@/components/scanCode/scanCode.vue'
import inOrOutStockApi, { TransferOrderItem, InOrOutStockScanData } from '@/api/inOrOutStock'

import { useMessage, useToast } from 'wot-design-uni'

import ScanCodeApi, { ScanPatternType } from '@/api/scanCode'
import goodsReceiptApi from '@/api/goodsReceipt'
import { formatUnit } from '@/utils/unit'

// 分组推荐储位
const groupLocation = ref('')
const showGroupLocation = ref(false)
// 下拉刷新
const isRefreshing = ref(false)
const onRefresh = () => {
  isRefreshing.value = true
  console.log('下拉刷新')
  setTimeout(() => {
    changeTabs()
    isRefreshing.value = false
  }, 1000)
}

// 控制分组按钮显示隐藏
const showGroupBtn = ref(false)

const message = useMessage()
const toast = useToast()
const locationCode = ref('')
// 上个页面传递过来的入库单号
const inStockCode = ref('')
const inStockId = ref(NaN)
// 入库状态
const inStockStatus = ref(4)
const tab = ref(1)
const changeTabs = () => {
  console.log(tab.value)
  if (tab.value === 1) {
    inOrOutStockApi.getTStockTranBasketDetailByCode(inStockCode.value).then((res) => {
      scanDataList.value = res.data as TransferOrderItem[]
    })
  }
  if (tab.value === 0) {
    getInStockDetail()
  }
  if (tab.value === 2) {
    getTempInStockDetail()
  }
}

// 获取待绑库数据列表
const getTempInStockDetail = () => {
  goodsReceiptApi.getTempInStockDetail(inStockCode.value).then((res) => {
    tempScanDataList.value = res.data.map((item) => ({
      id: item.id,
      basket: item.parentCode,
      productName: item.productName,
      qty: item.qty,
      productCode: item.productCode,
      tranCode: inStockCode.value,
      location: item.recInLocation,
    }))
  })
}

// 入库单详情数据
const stockTranDetailList = ref<TransferOrderItem[]>([])

// 已盘库产品数据
const scanDataList = ref<InOrOutStockScanData[]>([])

// 已扫码产品数据
const tempScanDataList = ref<
  {
    id: number
    basket: string
    productName: string
    qty: number
    productCode: string
    tranCode: string
    location?: string
  }[]
>([])

const groupScanList = ref<
  {
    basket: string
    productName: string
    qty: number
    productCode: string
    tranCode: string
    location?: string
  }[]
>([])

// 重复扫码校验
const isBasketScanned = (code: string): boolean => {
  if (ScanPatternType.BASKET_CODE_TIMESTAMP.test(code)) {
    const [basket] = code.split(';')

    return (
      tempScanDataList.value.some((item) => item.basket === basket) ||
      scanDataList.value.some((item) => item.basket === basket) ||
      groupScanList.value.some((item) => item.basket === basket)
    )
  } else if (ScanPatternType.BASKET_CODE.test(code)) {
    return (
      tempScanDataList.value.some((item) => item.basket === code) ||
      scanDataList.value.some((item) => item.basket === code) ||
      groupScanList.value.some((item) => item.basket === code)
    )
  }
}

// 筐是否存在校验
const checkBasketExist = async (basketCode: string) => {
  try {
    const res = await goodsReceiptApi.getBasketByCode(basketCode)
    if (res.data) {
      return true
    }
    return false
  } catch (error) {
    return false
  }
}

// 扫码后提交数据
const getScanData = async (basketCode: string) => {
  try {
    // 基础校验
    if (!basketCode) return toast.error('未扫描到条形码')

    // 如果既不是筐码也不是标签码，则提示
    if (
      !(
        ScanPatternType.BASKET_CODE.test(basketCode) ||
        ScanPatternType.BASKET_CODE_TIMESTAMP.test(basketCode)
      )
    ) {
      return toast.error('请扫描筐码或标签码')
    }
    if (ScanPatternType.BASKET_CODE.test(basketCode)) {
      const flag = await checkBasketExist(basketCode)

      if (!flag) return
    }

    // 重复扫码校验
    const isScanned = isBasketScanned(basketCode)

    if (isScanned) return toast.error('该条形码已扫描或已入库，请勿重复操作')

    // 如果是分组操作，则直接添加到分组列表
    if (showGroupBtn.value) {
      // 如果是分组操作，则直接添加到分组列表

      // 如果扫描的是标签码，则不获取产品信息
      if (ScanPatternType.BASKET_CODE_TIMESTAMP.test(basketCode)) {
        console.log('分组操作,扫描的是标签码，不获取产品信息', basketCode)

        return toast.error('请扫描筐码进行分组操作')
      }

      ScanCodeApi.getBasketRecordByCode(basketCode).then((res) => {
        console.log('分组操作，getBasketRecordByCode', res)
        if (!res?.data?.parentCode) {
          console.log('该筐为空，是否去绑定产品信息？')
          message
            .confirm({
              title: '提示',
              msg: '该筐为空，是否去绑定产品信息？',
              confirmButtonText: '是',
              cancelButtonText: '否',
            })
            .then((res) => {
              console.log(res, '用户选择：', res)
              uni.navigateTo({
                url: `/pages/binding/basketBind?basketCode=${basketCode}&inStockCode=${inStockCode.value}`,
              })
            })
        } else {
          console.log(res, '根据筐码获取产品信息：')
          if (!checkProductExist(res.data.productCode)) {
            return toast.error('入库单不存在该产品')
          }
          inOrOutStockApi
            .checkGroupBasket({
              ...res.data,
              basket: res.data.parentCode,
              tranCode: inStockCode.value,
            })
            .then((data) => {
              console.log(data, '分组校验：')

              groupScanList.value.push({
                basket: res.data.parentCode,
                productName: res.data.productName,
                qty: res.data.qty,
                productCode: res.data.productCode,
                tranCode: inStockCode.value,
              })
              // if (data.data) {
              //   groupScanList.value.push({
              //     basket: res.data.parentCode,
              //     productName: res.data.productName,
              //     qty: res.data.qty,
              //     productCode: res.data.productCode,
              //     tranCode: inStockCode.value,
              //   })
              // } else {
              //   toast.error('该筐码已被分组，请重新扫描')
              // }
            })
        }
      })
    } else {
      groupLocation.value = ''
      showGroupLocation.value = false
      // 如果不是分组操作，则先校验是否为标签码
      if (ScanPatternType.BASKET_CODE_TIMESTAMP.test(basketCode)) {
        console.log('扫描的是标签码，不获取产品信息', basketCode)

        const [basket, productCode, productName, qty, unit] = basketCode.split(';')

        if (!checkProductExist(productCode)) {
          return toast.error('入库单不存在该产品')
        }
        inOrOutStockApi
          .groupByBasket([
            {
              basket,
              productName,
              qty: Number(qty),
              productCode,
              tranCode: inStockCode.value,
              flag: true,
            },
          ])
          .then((res: any) => {
            console.log(res, '标签码不分组获取推荐储位成功')
            getTempInStockDetail()

            // tempScanDataList.value.unshift({
            //   basket,
            //   productName,
            //   qty: Number(qty),
            //   productCode,
            //   tranCode: '',
            //   location: res.data.code,
            // })
          })

        return
      }

      ScanCodeApi.getBasketRecordByCode(basketCode).then((res) => {
        console.log('不是分组操作，getBasketRecordByCode', res)
        console.log(res, '根据筐码获取产品信息：')
        if (!res?.data?.parentCode) {
          console.log('该筐为空，是否去绑定产品信息？')

          message
            .confirm({
              title: '提示',
              msg: '该筐为空，是否去绑定产品信息？',
              confirmButtonText: '是',
              cancelButtonText: '否',
            })
            .then((res) => {
              console.log(res, '用户选择：', res)
              uni.navigateTo({
                url: `/pages/binding/basketBind?basketCode=${basketCode}&inStockCode=${inStockCode.value}`,
              })
            })
          return
        }
        if (!checkProductExist(res.data.productCode)) {
          return toast.error('入库单不存在该产品')
        }
        const productInfo = {
          basket: res.data.parentCode,
          productName: res.data.productName,
          qty: res.data.qty,
          productCode: res.data.productCode,
          tranCode: inStockCode.value,
          location: res.data.recInLocation,
        }
        inOrOutStockApi
          .groupByBasket([productInfo])
          .then((res) => {
            console.log(res, '筐码不分组获取推荐储位成功')
            toast.success('获取推荐储位成功')
            getTempInStockDetail()
            // tempScanDataList.value.unshift(productInfo)
            // changeTabs()
          })
          .catch((error) => console.log(`筐码获取推荐储位失败,${error}`))
      })
    }
    inOrOutStockApi.getTStockTranBasketDetailByCode(inStockCode.value).then((res) => {
      scanDataList.value = res.data as TransferOrderItem[]
    })
  } catch (error) {
    console.error('扫码处理异常:', error)
    // toast.error('扫码处理失败，请重试')
  }
}

// 判断入库单是否存在该产品
const checkProductExist = (productCode: string) => {
  console.log(productCode, 'checkProductExist')

  return stockTranDetailList.value.some((item) => item.productCode === productCode)
}
//删除待绑库数据
const handleDelTempScan = (event, index: number) => {
  if (event.value === 'right') {
    message
      .confirm({
        msg: '确定删除吗？',
        title: '警告',
      })
      .then(() => {
        tempScanDataList.value.splice(index, 1)
        console.log(index)
      })
      .catch(() => {
        console.log('点击了取消按钮')
      })
  }
}

// 删除扫码数据
const handleDelScan = (event, index: number, type: 'index' | 'id') => {
  if (event.value === 'right') {
    message
      .confirm({
        msg: '确定删除吗？',
        title: '警告',
      })
      .then(() => {
        if (type === 'index') {
          tempScanDataList.value.splice(index, 1)
          toast.success('删除成功')
        } else {
          inOrOutStockApi
            .delTStockTranHead(index)
            .then(() => {
              toast.success('删除成功')
            })
            .catch(() => {
              toast.error('删除失败')
            })
            .finally(() => {
              changeTabs()
            })
        }
      })

      .catch(() => {
        console.log('点击了取消按钮')
      })
  }
}
const handleDelGroupScan = (event, index: number, type: 'index' | 'id') => {
  if (event.value === 'right') {
    message
      .confirm({
        msg: '确定删除吗？',
        title: '警告',
      })
      .then(() => {
        if (type === 'index') {
          groupScanList.value.splice(index, 1)
          toast.success('删除成功')
        } else {
          inOrOutStockApi
            .delTStockTranHead(index)
            .then(() => {
              toast.success('删除成功')
            })
            .catch(() => {
              toast.error('删除失败')
            })
            .finally(() => {
              changeTabs()
            })
        }
      })

      .catch(() => {
        console.log('点击了取消按钮')
      })
  }
}

// 获取入库单详情数据
function getInStockDetail() {
  inOrOutStockApi
    .getTStockTranHeadList({ pageNum: 1, pageSize: 1, code: inStockCode.value, iocode: 'i' })
    .then((res: any) => {
      console.log(res, 'res')
      stockTranDetailList.value = res.data.list[0].stockTranDetailList as TransferOrderItem[]
    })
}

onLoad((option) => {
  inStockCode.value = option.code
  inStockId.value = option.id
  inStockStatus.value = option.status
  getInStockDetail()
  changeTabs()
})

onShow(() => {
  changeTabs()
})
// 页面隐藏注销事件
onHide(() => {})

const handleSubmit = () => {
  message
    .confirm({
      msg: '是否提交入库单？',
      title: '警告',
    })
    .then(() => {
      inOrOutStockApi
        .submitTStockTranHead(inStockId.value)
        .then((res) => {
          toast.success('提交成功')
        })
        .then(() => {
          uni.navigateBack({ delta: 1 })
        })
        .catch((err) => {
          console.log('提交入库单失败', err)
        })
    })
    .catch(() => {
      console.log('点击了取消按钮')
    })
}

const handleBindLocation = () => {
  uni.navigateTo({
    url: `/pages/bindLocation/index?inStockCode=${inStockCode.value}`,
  })
  locationCode.value = ''
  tempScanDataList.value = []
}

// 完成分组
const finishGroup = () => {
  // 所有筐码
  showGroupBtn.value = false
  if (groupScanList.value.length === 0) {
    groupLocation.value = ''
    // return toast.error('请先扫码')
  } else {
    inOrOutStockApi
      .groupByBasket(groupScanList.value)
      .then((res) => {
        console.log('分组成功', res)
        toast.success('分组成功')
        groupScanList.value = []
        showGroupBtn.value = false
        changeTabs()
      })
      .catch((err) => {
        console.error('分组失败', err)
        groupScanList.value = []
      })
  }
}
</script>
<style lang="scss" scoped>
// 新增变量
$primary-color: #3e7bfa;
$secondary-color: #36b8c2;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$background-color: #f5f7fa;
$card-background: #ffffff;
$text-primary: #303133;
$text-secondary: #606266;
$border-color: #ebeef5;
$box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
$detail-primary: #1989fa;
$detail-success: #00b578;
$detail-danger: #ff4d4f;
$detail-warning: #ff9f00;
$card-gradient: linear-gradient(145deg, #ffffff, #f8faff);
// 新增布局变量
$spacing-base: 24rpx;
$card-radius: 16rpx;
$section-margin: $spacing-base * 1.5;

page {
  width: 100%;
  min-height: 100%;

  .wot-theme-light {
    min-height: 100%;
    background-color: #ffffff;
  }
}

.detail-container {
  display: flex;
  flex-direction: column;
  // 安全区域适配
  padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
  background-color: #ffffff;

  .order-info {
    padding: 25rpx;

    background-color: #ffffff;
    .order-number {
      margin-bottom: 24rpx;

      .label {
        font-size: 15px;
        font-weight: 500;
        color: #5c6b7a;
      }
      .value {
        margin-left: 12rpx;
        font-size: 15px;
        color: #2c3e50;
      }
    }
    .scan-tip {
      font-size: 14px;
      font-weight: 500;
      color: #8492a6;
    }
  }
  .list-card {
    display: flex;

    padding: 15rpx;
    margin: 15rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    &:active {
      transform: scale(0.98);
    }

    .table {
      width: 100%;
      margin-top: 20rpx;
      background-color: #ffffff;
      .table-header {
        display: flex;
        align-items: center;
        min-height: 88rpx;
        border-bottom: 1px solid #eeeeee;
        .th {
          flex: 1;
          padding: 20rpx 10rpx;
          font-size: 14px;
          font-weight: 500;
          color: #666666;
          text-align: center;
        }
      }
      .table-row {
        display: flex;
        align-items: center;
        min-height: 88rpx;
        .td {
          flex: 1;
          padding: 20rpx 10rpx;
          font-size: 14px;
          color: #333333;
          text-align: center;
        }
      }
      .suggestion-header {
        display: flex;
        align-items: center;
        min-height: 88rpx;
        margin-top: 20rpx;
        border-bottom: 1px solid #eeeeee;
        .th {
          flex: 1;
          padding: 20rpx 10rpx;
          font-size: 14px;
          font-weight: 500;
          color: #666666;
          text-align: center;
        }
      }
      .suggestion-row {
        display: flex;
        align-items: center;
        min-height: 88rpx;
        .td {
          flex: 1;
          padding: 20rpx 10rpx;
          font-size: 14px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }

  // 底部按钮优化
  .bottom-button {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 20rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    button {
      width: 100%;
      margin: auto 10rpx;
    }
  }
}
.stock-list {
  .list {
    .basket-card.error-border {
      border: 1px solid #f56c6c;
    }
    .basket-card {
      padding: 20rpx;
      margin: 0 20rpx;
      border: 1px solid #eeeeee;
      border-radius: 10rpx;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
      .basket-header {
        .basket-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .basket-code {
            font-size: 15px;
            font-weight: 500;
            color: #303133;
          }
        }
        .storage-status {
          display: flex;
          align-items: center;

          .location-text {
            margin-left: 10rpx;
            font-size: 28rpx;
            &.error-text {
              color: #f56c6c;
            }
          }
        }
      }
      .basket-content {
        .info-grid {
          display: flex;
          flex-direction: column;

          .info-cell {
            display: flex;

            align-items: center;
            justify-content: space-between;
            padding: 12rpx 20rpx;

            border-radius: 8rpx;

            .info-label {
              margin: 0 10rpx 0 20rpx;

              color: #909399;

              white-space: nowrap;
            }

            .info-value {
              overflow: hidden;

              font-weight: 500;

              color: #303133;

              text-overflow: ellipsis;
            }

            .wd-icon {
              flex-shrink: 0;
            }
          }
        }

        .error-msg {
          grid-column: span 2;
        }
      }
    }
    .swipe-delete {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200rpx;
      height: 100%;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #f56c6c;
    }
  }
  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20rpx;
    color: #909399;
    .empty-text {
      font-size: 14px;
      font-weight: 500;
      color: #909399;
    }
  }
}
</style>
